<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2024-03-28 11:06:04
 * @LastEditors: huangtianyang
 * @LastEditTime: 2024-05-08 10:19:15
 * @FilePath: \cxl-driving-training\src\views\questionManagement\list\Index.vue
-->
<template>
    <div class="page-box">
        <TemplateVue
            :page="data.pageData"
            @search="data.onSearch"
            @reset="data.onReset"
            @paginationChange="data.onPaginationChange"
            @paginationSize="data.onPaginationSize"
            @operation="data.onOperation"
        >
        </TemplateVue>
        <BaseDialog :data="data.dialogData" @close="data.onCancel">
            <template #content>
                <!-- 问题 -->
                <div class="question">
                    <questionVue type="question" :info="data.question" />
                </div>
                <!-- 回答列表 -->
                <div class="ask-list"></div>
                <!-- 添加问答按钮 -->
                <div class="btn-add">
                    <el-button class="add-ask-btn" type="primary" @click="data.onAddAsk">添加回答</el-button>
                </div>
                <!-- 回答的输入框 -->
                <div class="ask-input" v-for="(item, index) in data.askList" :key="index">
                    <div class="item">
                        <div class="input-box">
                            <el-input
                                type="textarea"
                                rows="4"
                                maxlength="200"
                                show-word-limit
                                v-model="item.content"
                                placeholder="请输入回答（200字以内）"
                            />
                        </div>
                        <div class="add-img">
                            <h1>添加图片（{{ item.img.value.length }}/{{ item.img.imageCount }}）</h1>
                            <UploadFileGroupVue
                                :data="item.img"
                                @change="
                                    (obj: any) => {
                                        console.log('obj', obj)
                                        item.img.valid = true
                                        item.img.value[obj.index] = obj.obj
                                        console.log('child.value', item.img.value)
                                    }
                                "
                                @delete="
                                    (index: number) => {
                                        item.img.value.splice(index, 1)
                                    }
                                "
                            ></UploadFileGroupVue>
                        </div>
                    </div>
                    <div class="close" @click="data.onCloseAsk(index)">
                        <el-icon class="avatar-uploader-icon">
                            <Close />
                        </el-icon>
                    </div>
                </div>
                <!-- 操作 -->
                <div class="btn operation">
                    <el-button @click="data.onCancel"> 取消</el-button>
                    <el-button type="primary" @click="data.onSave">确定</el-button>
                </div>
            </template>
        </BaseDialog>
    </div>
</template>
<script setup lang="ts">
import TemplateVue from '@/components/template/Index.vue'
import FAQsData from './index'
import { reactive } from 'vue'
import BaseDialog from '@/components/baseDialog/Index.vue'
import UploadFileGroupVue from '@/components/form/uploadFileGroup.vue'
import questionVue from '../questionComponent/Index.vue'

const data = reactive(new FAQsData())
</script>

<style scoped lang="scss">
.btn-add {
    margin: 16px 0;
}

.ask-input {
    box-sizing: border-box;
    border: 1px solid #dcdfe6;
    padding: 16px 50px 16px 16px;
    border-radius: 8px;
    position: relative;
    margin-bottom: 16px;
    .add-img {
        h1 {
            font-size: 14px;
            color: #000;
            margin: 8px 0;
        }
    }
    .close {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        cursor: pointer;
        opacity: 0.75;
        &:hover {
            opacity: 1;
        }
    }
}

.operation {
    display: flex;
    justify-content: center;
    margin: 30px 0 20px 0;
    > button {
        margin: 0 30px;
    }
}
</style>
